<!DOCTYPE html>
<html lang="en">

<head>
  @@include('./meta.html',{})
</head>

<body class="app-component">
  @@include('./header.html',{
  "components": "active"
  })
  <div class="component-wrapper">
    <div class="component-navleft">
      @@include('./navleft.html',{
      "tab_form": "active"
      })
    </div><!-- component-navleft -->

    <div class="component-sidebar">
      @@include('./sidebar.html',{
      "tab_form": "active",
      "form_input_masks": "active",
      "urlPrefix": "."
      })
    </div><!-- component-sidebar -->

      <div class="component-content">
        <div class="component-content-header">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-style1 mg-b-0">
              <li class="breadcrumb-item"><a href="#">Components</a></li>
              <li class="breadcrumb-item"><a href="#">Forms</a></li>
              <li class="breadcrumb-item active" aria-current="page">Input Masks</li>
            </ol>
          </nav>
          <a href="javascript:;" id="componentOptions" class="text-secondary mg-l-auto d-xl-none"><i data-feather="more-horizontal"></i></a>
        </div><!-- component-content-header -->

        <div class="component-content-body" data-spy="scroll" data-target="#navSection" data-offset="120">
          <div class="content content-components">
            <div class="container">
              <!--sd-->
              <h1 class="td-title">Input Masks</h1>
        <p class="td-lead">Cleave.js has a simple purpose: to help you format input text content automatically. Read the <a href="https://nosir.github.io/cleave.js/" target="_blank">Official Cleave.js Website</a> for a full list of instructions and other options.</p>

        <hr class="mg-y-40">

        <h4 id="section1" class="mg-b-10">Credit Card Formatting</h4>
        <p class="mg-b-30">Mask a credit card input element to identify users the type of credit card.</p>

        <div data-label="Example" class="td-example demo-forms">
          <input id="inputCreditCard" class="form-control" type="text" placeholder="Enter credit card number">
          <div id="creditCardType" class="d-flex tx-28 tx-gray-500 mg-t-10">
            <div class="amex lh-1"><i class="fab fa-cc-amex"></i></div>
            <div class="visa lh-1 mg-l-5"><i class="fab fa-cc-visa"></i></div>
            <div class="mastercard lh-1 mg-l-5"><i class="fab fa-cc-mastercard"></i></div>
            <div class="jcb lh-1 mg-l-5"><i class="fab fa-cc-jcb"></i></div>
            <div class="discover lh-1 mg-l-5"><i class="fab fa-cc-discover"></i></div>
            <div class="diners lh-1 mg-l-5"><i class="fab fa-cc-diners-club"></i></div>
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;input id=&quot;inputCreditCard&quot; class=&quot;form-control&quot; type=&quot;text&quot; placeholder=&quot;Enter credit card number&quot;&gt;

&lt;div id=&quot;creditCardType&quot; class=&quot;d-flex tx-28 tx-gray-500 mg-t-10&quot;&gt;
  &lt;div class=&quot;amex lh-1&quot;&gt;&lt;i class=&quot;fab fa-cc-amex&quot;&gt;&lt;/i&gt;&lt;/div&gt;
  &lt;div class=&quot;visa lh-1 mg-l-5&quot;&gt;&lt;i class=&quot;fab fa-cc-visa&quot;&gt;&lt;/i&gt;&lt;/div&gt;
  &lt;div class=&quot;mastercard lh-1 mg-l-5&quot;&gt;&lt;i class=&quot;fab fa-cc-mastercard&quot;&gt;&lt;/i&gt;&lt;/div&gt;
  &lt;div class=&quot;jcb lh-1 mg-l-5&quot;&gt;&lt;i class=&quot;fab fa-cc-jcb&quot;&gt;&lt;/i&gt;&lt;/div&gt;
  &lt;div class=&quot;discover lh-1 mg-l-5&quot;&gt;&lt;i class=&quot;fab fa-cc-discover&quot;&gt;&lt;/i&gt;&lt;/div&gt;
  &lt;div class=&quot;diners lh-1 mg-l-5&quot;&gt;&lt;i class=&quot;fab fa-cc-diners-club&quot;&gt;&lt;/i&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
        <pre><code class="language-js">var cleave = new Cleave(&apos;#inputCreditCard&apos;, {
  creditCard: true,
  onCreditCardTypeChanged: function (type) {
    console.log(type)
    var card = $(&apos;#creditCardType&apos;).find(&apos;.&apos;+type);

    if(card.length) {
      card.addClass(&apos;tx-primary&apos;);
      card.siblings().removeClass(&apos;tx-primary&apos;);
    } else {
      $(&apos;#creditCardType span&apos;).removeClass(&apos;tx-primary&apos;);
    }
  }
});</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section2" class="mg-b-10">Phone Number Formatting</h4>
        <p class="mg-b-30">Mask an input element to provide users or a guide for entering phone number.</p>

        <div data-label="Example" class="td-example demo-forms">
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text">US (+1)</span>
            </div>
            <input id="inputPhoneNumber" type="text" class="form-control" placeholder="Enter phone number">
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class=&quot;input-group&quot;&gt;
  &lt;div class=&quot;input-group-prepend&quot;&gt;
    &lt;span class=&quot;input-group-text&quot;&gt;US (+1)&lt;/span&gt;
  &lt;/div&gt;
  &lt;input id=&quot;inputPhoneNumber&quot; type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Enter phone number&quot;&gt;
&lt;/div&gt;</code></pre>
        <pre><code class="language-js">var cleave = new Cleave(&apos;#inputPhoneNumber&apos;, {
  phone: true,
  phoneRegionCode: &apos;US&apos;
});</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section3" class="mg-b-10">Date Formatting</h4>
        <p class="mg-b-30">Mask an input element to provide users or a guide for entering date.</p>

        <div data-label="Example" class="td-example demo-forms">
          <input id="inputDate" type="text" class="form-control" placeholder="YYYY/MM/DD">
          <input id="inputDate2" type="text" class="form-control mg-t-10" placeholder="MM/YY">
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;input id=&quot;inputDate&quot; type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;YYYY/MM/DD&quot;&gt;
&lt;input id=&quot;inputDate2&quot; type=&quot;text&quot; class=&quot;form-control mg-t-10&quot; placeholder=&quot;MM/YY&quot;&gt;</code></pre>
        <pre><code class="language-js">var cleaveC = new Cleave(&apos;#inputDate&apos;, {
  date: true,
  datePattern: [&apos;Y&apos;, &apos;m&apos;, &apos;d&apos;]
});

var cleaveD = new Cleave(&apos;#inputDate2&apos;, {
  date: true,
  datePattern: [&apos;m&apos;, &apos;y&apos;]
});</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section4" class="mg-b-10">Time Formatting</h4>
        <p class="mg-b-30">Mask an input element to provide users or a guide for entering time..</p>

        <div data-label="Example" class="td-example demo-forms">
          <input id="inputTime" type="text" class="form-control" placeholder="hh:mm:ss">
          <input id="inputTime2" type="text" class="form-control mg-t-10" placeholder="hh:mm">
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;input id=&quot;inputTime&quot; type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;hh:mm:ss&quot;&gt;
&lt;input id=&quot;inputTime2&quot; type=&quot;text&quot; class=&quot;form-control mg-t-10&quot; placeholder=&quot;hh:mm&quot;&gt;</code></pre>
        <pre><code class="language-js">var cleaveE = new Cleave(&apos;#inputTime&apos;, {
  time: true,
  timePattern: [&apos;h&apos;, &apos;m&apos;, &apos;s&apos;]
});

var cleaveF = new Cleave(&apos;#inputTime2&apos;, {
  time: true,
  timePattern: [&apos;h&apos;, &apos;m&apos;]
});</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section5" class="mg-b-10">Numeral Formatting</h4>
        <p class="mg-b-30">Mask an input element to provide users or a guide for entering numerals.</p>

        <div data-label="Example" class="td-example demo-forms">
          <input id="inputNumeral" type="text" class="form-control" placeholder="Enter numeral">
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;input id=&quot;inputNumeral&quot; type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Enter numeral&quot;&gt;</code></pre>
        <pre><code class="language-js">var cleaveG = new Cleave(&apos;#inputNumeral&apos;, {
  numeral: true,
  numeralThousandsGroupStyle: &apos;thousand&apos;
});</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section6" class="mg-b-10">Custom Options</h4>
        <p class="mg-b-30">Some example of custom mask option to an input element.</p>

        <div data-label="Example" class="td-example demo-forms">
          <input id="inputBlocks" type="text" class="form-control" placeholder="0000 000 000 0000">
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;input id=&quot;inputBlocks&quot; type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;0000 000 000 0000&quot;&gt;</code></pre>
        <pre><code class="language-js">var cleaveH = new Cleave(&apos;#inputBlocks&apos;, {
  blocks: [4, 3, 3, 4],
  uppercase: true
});</code></pre>

        <div data-label="Example" class="td-example demo-forms mg-t-35">
          <input id="inputBlocks2" type="text" class="form-control" placeholder="">
        </div><!-- td-example -->
        <pre><code class="language-js">var cleaveI = new Cleave(&apos;#inputBlocks2&apos;, {
  delimiters: [&apos;+&apos;, &apos;+&apos;, &apos;-&apos;],
  blocks: [3, 3, 4, 2]
});</code></pre>

        <div data-label="Example" class="td-example demo-forms mg-t-35">
          <input id="inputBlocks3" type="text" class="form-control" placeholder="">
        </div><!-- td-example -->
        <pre><code class="language-js">var cleaveJ = new Cleave(&apos;#inputBlocks3&apos;, {
  prefix: &apos;+63&apos;,
  uppercase: true
});</code></pre>
 
@@include('./footer.html',{})

            </div>
          </div>
        </div><!-- component-content-body -->

        <div class="component-content-sidebar section-nav">
          <label class="tx-10 tx-medium tx-spacing-1 tx-color-03 tx-uppercase tx-sans mg-b-15">On This Page</label>
          <nav id="navSection" class="nav flex-column">
            <a href="#section1" class="nav-link">Credit Card Formatting</a>
            <a href="#section2" class="nav-link">Phone Number Formatting</a>
            <a href="#section3" class="nav-link">Date Formatting</a>
            <a href="#section4" class="nav-link">Time Formatting</a>
            <a href="#section5" class="nav-link">Numeral Formatting</a>
            <a href="#section6" class="nav-link">Custom Options</a>
          </nav>
        </div><!-- component-content-sidebar -->
      </div><!-- component-content -->

    </div><!-- component-wrapper -->


    @@include('./_script.html',{})

    <script src="../lib/cleave.js/cleave.min.js"></script>
    <script src="../lib/cleave.js/addons/cleave-phone.us.js"></script>
 
    <script>
      $(function(){
        'use strict'
 
        // Credit Card
        var cleaveA = new Cleave('#inputCreditCard', {
          creditCard: true,
          onCreditCardTypeChanged: function (type) {
            console.log(type)
            var card = $('#creditCardType').find('.'+type);

            if(card.length) {
              card.addClass('tx-primary');
              card.siblings().removeClass('tx-primary');
            } else {
              $('#creditCardType span').removeClass('tx-primary');
            }
          }
        });

        // US Format Phone Number
        var cleaveB = new Cleave('#inputPhoneNumber', {
          phone: true,
          phoneRegionCode: 'US'
        });

        // Date Formatting
        var cleaveC = new Cleave('#inputDate', {
          date: true,
          datePattern: ['Y', 'm', 'd']
        });

        var cleaveD = new Cleave('#inputDate2', {
          date: true,
          datePattern: ['m', 'y']
        });

        // Time Formatting
        var cleaveE = new Cleave('#inputTime', {
          time: true,
          timePattern: ['h', 'm', 's']
        });

        var cleaveF = new Cleave('#inputTime2', {
          time: true,
          timePattern: ['h', 'm']
        });

        // Numeral Formatting
        var cleaveG = new Cleave('#inputNumeral', {
          numeral: true,
          numeralThousandsGroupStyle: 'thousand'
        });


        // Blocks Formatting
        var cleaveH = new Cleave('#inputBlocks', {
          blocks: [4, 3, 3, 4],
          uppercase: true
        });

        // Multiple Delimiter
        var cleaveI = new Cleave('#inputBlocks2', {
          delimiters: ['+', '+', '-'],
          blocks: [3, 3, 4, 2]
        });

        // Prefix
        var cleaveJ = new Cleave('#inputBlocks3', {
          prefix: 'Prefix-',
          uppercase: true
        });


      });
    </script>
  </body>
</html>
